JavaScript Intl API: Internacionalizācijas labākā prakse globālai auditorijai

Mūsdienu savstarpēji saistītajā pasaulē ir ļoti svarīgi veidot tīmekļa lietojumprogrammas, kas ir piemērotas globālai auditorijai. JavaScript Intl API nodrošina jaudīgus rīkus internacionalizācijai (i18n), kas ļauj formatēt datumus, skaitļus, valūtas un daudz ko citu atbilstoši dažādu lokalizāciju konvencijām. Šajā rakstā aplūkotas labākās prakses, kā izmantot Intl API, lai veidotu patiesi globālas lietojumprogrammas.

Internacionalizācijas (i18n) un lokalizācijas (l10n) izpratne

Pirms iedziļināties Intl API specifikā, ir svarīgi saprast atšķirību starp internacionalizāciju (i18n) un lokalizāciju (l10n). I18n ir lietojumprogrammu projektēšanas un izstrādes process tādā veidā, lai tās varētu viegli pielāgot dažādām valodām un reģioniem, neprasot izmaiņas inženierijas līmenī. Savukārt L10n ir internacionalizētas lietojumprogrammas pielāgošanas process konkrētai lokalizācijai, tulkojot tekstu un pielāgojot citus lokalizācijai specifiskus elementus.

Intl API koncentrējas uz i18n aspektu, nodrošinot mehānismus lokalizācijai jutīgu datu apstrādei, kamēr lokalizācija parasti ietver tulkojumu un lokalizācijai specifisku konfigurāciju nodrošināšanu.

Intl API galvenās sastāvdaļas

Intl API sastāv no vairākiem galvenajiem objektiem, no kuriem katrs ir atbildīgs par konkrētu internacionalizācijas aspektu apstrādi:

• Intl.Collator: Virkņu salīdzināšanai atbilstoši lokalizācijai.
• Intl.DateTimeFormat: Datumu un laiku formatēšanai.
• Intl.NumberFormat: Skaitļu, tostarp valūtu un procentu, formatēšanai.
• Intl.PluralRules: Daudzskaitļa locījumu noteikumu apstrādei dažādās valodās.
• Intl.ListFormat: Sarakstu formatēšanai atbilstoši lokalizācijai.
• Intl.RelativeTimeFormat: Relatīvā laika (piemēram, "vakar", "pēc 2 stundām") formatēšanai.

Labākā prakse Intl API izmantošanai

Lai efektīvi izmantotu Intl API un nodrošinātu pozitīvu lietotāja pieredzi savai globālajai auditorijai, apsveriet šādas labākās prakses:

1. Norādiet pareizo lokalizāciju

Internacionalizācijas pamats ir pareizas lokalizācijas norādīšana. Lokalizācija identificē valodu, reģionu un jebkādus specifiskus variantus, kas jāizmanto formatēšanai. Jūs varat iegūt lietotāja vēlamo lokalizāciju no navigator.language īpašības vai Accept-Language HTTP galvenes.

Veidojot Intl objektus, jūs varat norādīt lokalizāciju kā virkni vai virkņu masīvu. Ja norādīsiet masīvu, API mēģinās atrast vislabāk atbilstošo lokalizāciju no pieejamajām opcijām.

Piemērs:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Ja lietotāja vēlamā lokalizācija nav pieejama, varat norādīt rezerves lokalizāciju. Piemēram, varat izmantot 'en-US' kā noklusējuma vērtību, ja lietotāja pārlūkprogramma ziņo par neatbalstītu lokalizāciju.

2. Izmantojiet Intl.DateTimeFormat datumu un laika formatēšanai

Pareiza datumu un laiku formatēšana ir izšķiroša, lai nodrošinātu lokalizētu pieredzi. Intl.DateTimeFormat objekts ļauj formatēt datumus un laikus atbilstoši konkrētas lokalizācijas konvencijām.

Jūs varat pielāgot formatējumu, norādot dažādas opcijas, piemēram, gada, mēneša, dienas, stundas, minūtes un sekundes formātu. Varat arī norādīt laika joslu, lai nodrošinātu, ka datumi un laiki tiek pareizi attēloti lietotājiem dažādās pasaules daļās.

Piemērs:

const locale = 'de-DE'; // Vācu (Vācija)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Izvade: piem. "2024. gada 22. maijs, 14:30"
console.log(formattedDate);

Šis piemērs formatē pašreizējo datumu un laiku atbilstoši vācu (Vācija) lokalizācijai, ieskaitot gadu, mēnesi, dienu, stundu un minūti. Tas arī norāda 'Europe/Berlin' laika joslu.

Atcerieties ņemt vērā dažādus datumu un laika formātus, kas tiek izmantoti visā pasaulē. Piemēram, ASV izmanto MM/DD/GGGG, kamēr daudzas citas valstis izmanto DD/MM/GGGG.

3. Izmantojiet Intl.NumberFormat skaitļu, valūtu un procentu formatēšanai

Intl.NumberFormat objekts nodrošina elastīgu veidu, kā formatēt skaitļus, valūtas un procentus atbilstoši lokalizācijai specifiskām konvencijām. Jūs varat pielāgot formatējumu, norādot tādas opcijas kā valūta, stils (decimāls, valūta vai procents), minimālais un maksimālais decimāldaļu ciparu skaits un citas.

Piemērs (valūtas formatēšana):

const locale = 'ja-JP'; // Japāņu (Japāna)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Izvade: piem. "￥12,346"
console.log(formattedAmount);

Šis piemērs formatē skaitli 12345.67 kā Japānas jēnu (JPY). Ievērojiet, kā valūtas simbols (￥) un grupu atdalītājs (,) tiek automātiski pielāgoti atbilstoši japāņu lokalizācijai.

Piemērs (procentu formatēšana):

const locale = 'ar-EG'; // Arābu (Ēģipte)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Izvade: piem. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Šis piemērs formatē skaitli 0.75 kā procentuālu vērtību arābu (Ēģipte) valodā. Izvadē ir iekļauta arābu procentu zīme (٪) un divas decimāldaļas.

Svarīgi apsvērumi valūtas formatēšanai:

• Valūtu kodi: Izmantojiet pareizus ISO 4217 valūtu kodus (piemēram, USD, EUR, JPY).
• Simbola novietojums: Apzinieties, ka valūtas simbola pozīcija dažādās lokalizācijās atšķiras (piemēram, pirms vai pēc summas).
• Decimālie atdalītāji un grupu atdalītāji: Izprotiet dažādas konvencijas decimālajiem atdalītājiem (piemēram, punkts vai komats) un grupu atdalītājiem (piemēram, komats vai punkts).

4. Pareizi apstrādājiet daudzskaitļa locījumus ar Intl.PluralRules

Daudzskaitļa locījumu noteikumi ievērojami atšķiras starp valodām. Piemēram, angļu valodā ir vienkārši noteikumi ar vienskaitļa un daudzskaitļa formām, kamēr citās valodās ir sarežģītāki noteikumi, kas balstīti uz skaitļa vērtību. Intl.PluralRules objekts palīdz noteikt pareizo daudzskaitļa formu konkrētam skaitlim un lokalizācijai.

Piemērs:

const locale = 'ru-RU'; // Krievu (Krievija)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (vienskaitlis)
    case 'few': return 'товара'; // tovara (daži)
    case 'many': return 'товаров'; // tovarov (daudz)
    default: return 'товаров'; // Noklusējuma vērtība ir daudz
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Izvade: "5 товаров"

Šis piemērs demonstrē, kā izmantot Intl.PluralRules, lai iegūtu pareizo daudzskaitļa formu vārdam "товар" (prece) krievu valodā. Krievu valodā ir dažādas daudzskaitļa formas atkarībā no tā, vai skaitlis beidzas ar 1, 2-4 vai 5-9.

5. Formatējiet sarakstus ar Intl.ListFormat

Prezentējot vienumu sarakstus, formatējums var atšķirties starp lokalizācijām. Intl.ListFormat objekts ļauj formatēt sarakstus atbilstoši lokalizācijai specifiskām konvencijām, ieskaitot dažādu saikļu (piemēram, "un", "vai") un saraksta atdalītāju (piemēram, komatu, semikolu) izmantošanu.

Piemērs:

const locale = 'es-ES'; // Spāņu (Spānija)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Izvade: "manzanas, naranjas y plátanos"
console.log(formattedList);

Šis piemērs formatē augļu sarakstu spāņu (Spānija) valodā, izmantojot saikli "y" (un), lai savienotu pēdējos divus vienumus.

6. Formatējiet relatīvo laiku ar Intl.RelativeTimeFormat

Relatīvā laika attēlošana (piemēram, "vakar", "pēc 2 stundām") nodrošina lietotājam draudzīgu veidu, kā prezentēt laika informāciju. Intl.RelativeTimeFormat objekts ļauj formatēt relatīvo laiku atbilstoši lokalizācijai specifiskām konvencijām.

Piemērs:

const locale = 'fr-CA'; // Franču (Kanāda)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Izvade: "hier"
console.log(rtf.format(2, 'day')); // Izvade: "dans 2 jours"

Šis piemērs formatē relatīvo laiku franču (Kanāda) valodā. Izvade rāda "hier" (vakar) un "dans 2 jours" (pēc 2 dienām).

Opcija `numeric` kontrolē, kā tiek attēloti skaitļi. `'auto'` attēlo relatīvus vārdus, ja tie ir pieejami (piemēram, "vakar"), un citādi skaitļus. `'always'` vienmēr attēlo skaitļus.

7. Kārtojiet virknes ar Intl.Collator

Virkņu salīdzināšana ir atkarīga no lokalizācijas. Veids, kā virknes tiek kārtotas, atšķiras atkarībā no valodas. Piemēram, vācu valodā burts "ä" parasti tiek kārtots kā "a", bet zviedru valodā tas tiek kārts pēc "z". `Intl.Collator` objekts ļauj salīdzināt virknes atbilstoši konkrētas lokalizācijas noteikumiem.

Piemērs:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Izvade: ["äpfel", "aprikosen", "bananen", "birnen"]

Šis piemērs kārto vācu vārdu masīvu, izmantojot Intl.Collator. Ievērojiet, ka "äpfel" tiek kārts pirms "aprikosen", lai gan "ä" alfabētā ir vēlāk.

8. Apstrādājiet īpašos gadījumus un trūkstošos datus

Ne visas lokalizācijas tiek atbalstītas katrā pārlūkprogrammā vai vidē. Ir būtiski apstrādāt īpašos gadījumus, kad lokalizācija nav pieejama vai kad dati trūkst. Apsveriet šādas stratēģijas:

• Nodrošiniet rezerves lokalizācijas: Norādiet noklusējuma lokalizāciju, ko izmantot, ja lietotāja vēlamā lokalizācija nav atbalstīta.
• Paredziet atkāpšanos: Ja konkrētas formatēšanas opcijas lokalizācijai netiek atbalstītas, nodrošiniet saprātīgu rezerves variantu. Piemēram, varat attēlot datumu mazāk detalizētā formātā.
• Izmantojiet Try-Catch blokus: Ietveriet Intl API izsaukumus try-catch blokos, lai graciozi apstrādātu iespējamās kļūdas.

9. Rūpīgi testējiet ar dažādām lokalizācijām

Rūpīga testēšana ir izšķiroša, lai nodrošinātu, ka jūsu internacionalizētā lietojumprogramma pareizi darbojas visās atbalstītajās lokalizācijās. Testējiet savu lietojumprogrammu ar dažādām lokalizācijām, ieskaitot valodas, kas izmanto dažādas rakstzīmju kopas, datumu un laika formātus, skaitļu formātus un daudzskaitļa locījumu noteikumus.

Apsveriet iespēju izmantot automatizētus testēšanas rīkus, lai pārbaudītu, vai jūsu lietojumprogramma darbojas kā paredzēts dažādās lokalizācijās.

10. Apsveriet ietekmi uz veiktspēju

Lai gan Intl API parasti ir efektīvs, Intl objektu veidošana var būt salīdzinoši dārga. Lai optimizētu veiktspēju, apsveriet šādus ieteikumus:

• Kešojiet Intl objektus: Izveidojiet Intl objektus vienreiz un atkārtoti izmantojiet tos, kad vien iespējams, nevis veidojiet jaunus objektus katrai formatēšanas operācijai.
• Slinkā lokalizācijas datu ielāde: Ielādējiet lokalizācijas datus tikai tad, kad tie ir nepieciešami, nevis ielādējiet visus lokalizācijas datus uzreiz.

Ārpus Intl API: Papildu apsvērumi internacionalizācijai

Lai gan Intl API nodrošina jaudīgus rīkus datu formatēšanai, internacionalizācija ietver vairāk nekā tikai formatēšanu. Apsveriet šādus papildu aspektus:

• Teksta virziens (RTL/LTR): Atbalstiet valodas, kas tiek rakstītas no labās uz kreiso pusi (RTL), piemēram, arābu un ivritu, izmantojot CSS, lai pielāgotu jūsu lietojumprogrammas izkārtojumu.
• Rakstzīmju kodējums: Izmantojiet UTF-8 kodējumu, lai nodrošinātu, ka jūsu lietojumprogramma var apstrādāt plašu rakstzīmju klāstu.
• Tulkošanas pārvaldība: Izmantojiet tulkošanas pārvaldības sistēmu, lai optimizētu jūsu lietojumprogrammas teksta tulkošanas procesu.
• Kulturāli jutīgs dizains: Projektējot lietojumprogrammu, ņemiet vērā kultūras atšķirības. Piemēram, krāsu simbolika dažādās kultūrās var atšķirties.

Noslēgums

JavaScript Intl API ir nenovērtējams rīks, lai veidotu tīmekļa lietojumprogrammas, kas ir piemērotas globālai auditorijai. Ievērojot šajā rakstā izklāstītās labākās prakses, jūs varat izveidot lietojumprogrammas, kas ir ne tikai funkcionālas, bet arī kulturāli jutīgas un lietotājam draudzīgas lietotājiem visā pasaulē. Izmantojiet Intl API jaudu un atraisiet savas lietojumprogrammas potenciālu globālajā arēnā. Intl API apgūšana nodrošinās iekļaujošāku un pieejamāku pieredzi visiem jūsu lietotājiem neatkarīgi no viņu atrašanās vietas vai valodas.